<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form ref="queryFormRef" :inline="true" :model="paramsData" class="-mb-15px" label-width="auto">
      <el-form-item label="发布部门" prop="deptId">
        <el-tree-select
          v-model="paramsData.deptId"
          class="!w-280px"
          :data="deptTree"
          filterable
          clearable
          :props="defaultProps"
          check-strictly
          default-expand-all
          placeholder="请选择发布部门"
          value-key="deptId"
        />
      </el-form-item>
      <el-form-item label="消息标题" prop="title">
        <el-input v-model="paramsData.title" class="!w-300px" clearable placeholder="请输入消息标题" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button v-hasPermi="['wise:construction-logs:query']" @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['wise:contract:create']" plain type="primary" @click="openForm(null)">
          <Icon class="mr-5px" icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="tableData">
      <template v-for="item in tableColumn" :key="item.prop">
        <el-table-column
          :width="item.width"
          :align="item.align ? item.align : 'center'" 
          :label="item.label"
          :prop="item.prop"
        >
          <template #default="scope">
            <div v-if="item.prop == 'senderType'">
              {{ scope.row.senderType ? msgLableList.find(item => item.value == scope.row.senderType)?.label : '-' }}
            </div>
            <div v-else-if="item.prop == 'createTime'">
              {{ scope.row.createTime ? formatDate(scope.row.createTime) : '-' }}
            </div>
            <div v-else-if="item.prop == 'creator'">
              <p v-if="scope.row.creator && userList.find(item => item.id == scope.row.creator)?.username">
                {{ 
                    userList.find(item => item.id == scope.row.creator)?.username + 
                    `（${userList.find(item => item.id == scope.row.creator)?.mobile}）` 
                }}</p>
                <span v-else>-</span>
            </div>
            <div v-else>
              {{ scope.row[item.prop] || '-' }}
            </div>
          </template>
        </el-table-column>
      </template>

      <el-table-column :width="200" align="center" label="操作">
        <template #default="scope">
          <el-button v-hasPermi="['wise:contract:update']" link type="primary" @click="openForm(scope.row.id)">
            编辑
          </el-button>
          <el-button v-hasPermi="['wise:contract:delete']" link type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>


    <!-- 分页 -->
    <Pagination v-model:limit="paramsData.pageSize" v-model:page="paramsData.pageNo" :total="total" @pagination="getList" />
  </ContentWrap>

  <AddOrEdit ref="AddOrEditRef" />
</template>
<script setup>
  import {ref,reactive,provide,nextTick} from "vue"
  import download from '@/utils/download'
  import { defaultProps, handleTree } from '@/utils/tree'
  import * as DeptApi from '@/api/system/dept'
  import { getMsgPushList } from '@/api/viewsApi/msgPush'
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import { formatDate } from '@/utils/formatTime'
  import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
  import AddOrEdit from "./addOrEdit.vue"
  import { getSimpleRoleAllList } from '@/api/system/role/index' // 角色接口
  const AddOrEditRef = ref()
  const { wsCache } = useCache('sessionStorage')
  const userList = wsCache.get(CACHE_KEY.USER_LIST) || [] // 全量用户数据
  const msgLableList = ref(getIntDictOptions(DICT_TYPE.WISE_MESSAGE_LABEL)) // 消息类别数据
  provide('msgLableList', msgLableList)
  const paramsData = reactive({
    pageNo: 1,
    pageSize: 10,
    deptId: '',
    title: '',
    ids: []
  })
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const tableData = ref([]) // 列表的数据
  const tableColumn = ref([
    { prop: 'title', label: '消息标题', align: 'center'},
    { prop: 'senderType', label: '消息类型', align: 'center'},
    { prop: 'deptName', label: '发布部门', align: 'center'},
    { prop: 'creator', label: '发布人', align: 'center'},
    { prop: 'createTime', label: '发布时间', align: 'center'},
  ]) // 表格的列
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
  const selectIds = ref([])
  const pageStatus = ref(1) // 1列表  2详情
  const deptTree = ref() // 树形结构
  provide('deptTree', deptTree)
  const roleList = ref([]) // 角色列表
  provide('roleList', roleList)

  /** 获得部门树 */
  const getTree = async () => {
    deptTree.value = []
    const data = await DeptApi.getSimpleDeptList()
    deptTree.value = handleTree(data)
  }
  /** 查询角色列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await getMsgPushList(paramsData)
      tableData.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }
  provide('getList', getList)

  /** 获得角色列表 */
  const getRoleList = async () => {
    roleList.value = await getSimpleRoleAllList()
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    paramsData.pageNo = 1
    getList()
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  const openForm = (id) => {
    nextTick(() => {
      AddOrEditRef.value.init(id)
    })
  }

  /** 初始化 **/
  onMounted(async() => {
    await getTree()
    await getList()
    await getRoleList()
  })
</script>
<style lang="scss" scoped>

</style>
